<template>
  <div :class="classes" :style="styles">
    <slot></slot>
  </div>
</template>
<script setup>
import { inject, computed,getCurrentInstance,onMounted  } from 'vue'
const prefixCls = 'haloe-col'
const parseFlex = (flex) => {
  if (typeof flex === 'number') {
    return `${flex} ${flex} auto`
  }

  if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
    return `0 0 ${flex}`
  }

  return flex
}

const RowInstance = inject('RowInstance')
const instance=getCurrentInstance();
const props = defineProps({
  span: [Number, String],
  order: [Number, String],
  offset: [Number, String],
  push: [Number, String],
  pull: [Number, String],
  className: String,
  xs: [Number, Object],
  sm: [Number, Object],
  md: [Number, Object],
  lg: [Number, Object],
  xl: [Number, Object],
  xxl: [Number, Object],

  flex: {
    type: [Number, String],
    default: '',
  },
})

const gutter = computed(() => {
  // return RowInstance.ctx.gutter
  return RowInstance.gutter
})

const classes = computed(() => {
  let classList = [
    `${prefixCls}`,
    {
      [`${prefixCls}-span-${props.span}`]: props.span,
      [`${prefixCls}-order-${props.order}`]: props.order,
      [`${prefixCls}-offset-${props.offset}`]: props.offset,
      [`${prefixCls}-push-${props.push}`]: props.push,
      [`${prefixCls}-pull-${props.pull}`]: props.pull,
      [`${props.className}`]: !!props.className,
    },
  ]
  ;['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach((size) => {
    if (typeof instance.ctx[size] === 'number') {
      classList.push(`${prefixCls}-span-${size}-${instance.ctx[size]}`)
    } else if (typeof instance.ctx[size] === 'object') {
      let _props = instance.ctx[size]
      // console.log("_props",_props)
      Object.keys(_props).forEach((prop) => {
        classList.push(
          prop !== 'span'
            ? `${prefixCls}-${size}-${prop}-${_props[prop]}`
            : `${prefixCls}-span-${size}-${_props[prop]}`
        )
      })
    }
  })
  return classList
})

const styles=computed(()=>{
  let style={}
  if(gutter.value!==0){
    style={
      paddingLeft:gutter.value/2+'px',
      paddingRight:gutter.value/2+'px'
    }
  }

  if(props.flex){
    style.flex=parseFlex(props.flex)
  }
  return style
})

onMounted(() => {
  // console.log("RowInstance",styles.value)
})
</script>
